<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 600px;
            height: 500px;
            background: #f0f0f0;
            position: relative;
            border-radius: 8px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .hash-table {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin-top: 30px;
            width: 100%;
        }
        .hash-slot {
            width: 100%;
            height: 60px;
            background: #90CAF9;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
            transition: all 0.3s;
            border: 2px solid #1976D2;
            position: relative;
        }
        .hash-index {
            position: absolute;
            top: -20px;
            font-size: 12px;
            color: #666;
        }
        .status {
            margin-top: 30px;
            font-size: 16px;
            color: #333;
            font-family: Arial, sans-serif;
        }
        .target-display {
            margin-top: 20px;
            font-size: 18px;
            color: #333;
            font-family: Arial, sans-serif;
        }
        .hash-value {
            font-size: 16px;
            font-weight: bold;
        }
        .hash-key {
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body style="margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0;">
    <div class="container">
        <div class="target-display" id="target-display"></div>
        <div class="hash-table" id="hash-table"></div>
        <div class="status" id="status"></div>
    </div>

    <script>
        // 创建哈希表
        const hashTable = [
            { key: 5, value: "Apple" },
            { key: 12, value: "Banana" },
            { key: 8, value: "Orange" },
            { key: 15, value: "Grape" },
            { key: 3, value: "Peach" },
            { key: 7, value: "Pear" },
            { key: 11, value: "Mango" },
            { key: 9, value: "Kiwi" },
            { key: 14, value: "Lemon" },
            { key: 2, value: "Cherry" }
        ];
        let target = 8; // 要查找的目标键

        // 创建哈希表可视化
        function createHashTable() {
            const container = document.getElementById('hash-table');
            container.innerHTML = '';
            
            // 创建10个哈希槽
            for (let i = 0; i < 10; i++) {
                const slot = document.createElement('div');
                slot.className = 'hash-slot';
                slot.innerHTML = `
                    <div class="hash-index">索引 ${i}</div>
                    <div class="hash-key">键: ${hashTable[i].key}</div>
                    <div class="hash-value">${hashTable[i].value}</div>
                `;
                container.appendChild(slot);
            }

            // 显示目标值
            document.getElementById('target-display').textContent = `查找键: ${target}`;
        }

        // 更新状态显示
        function updateStatus(message) {
            document.getElementById('status').textContent = message;
        }

        // 哈希查找动画
        async function hashSearch() {
            const slots = document.querySelectorAll('.hash-slot');
            
            // 重置所有槽的颜色
            slots.forEach(slot => {
                slot.style.backgroundColor = '#90CAF9';
                slot.style.borderColor = '#1976D2';
            });

            // 计算哈希值
            const hashValue = target % 10;
            updateStatus(`计算哈希值: ${target} % 10 = ${hashValue}`);
            await new Promise(resolve => setTimeout(resolve, 1000));

            // 高亮对应的哈希槽
            slots[hashValue].style.backgroundColor = '#FF4081';
            updateStatus(`检查索引 ${hashValue} 的槽`);
            await new Promise(resolve => setTimeout(resolve, 1000));

            if (hashTable[hashValue].key === target) {
                slots[hashValue].style.backgroundColor = '#4CAF50';
                updateStatus(`找到键 ${target}，对应的值是: ${hashTable[hashValue].value}`);
            } else {
                // 处理冲突（这里使用线性探测）
                let currentIndex = (hashValue + 1) % 10;
                while (currentIndex !== hashValue) {
                    slots[currentIndex].style.backgroundColor = '#FF4081';
                    updateStatus(`发生冲突，检查下一个槽: ${currentIndex}`);
                    await new Promise(resolve => setTimeout(resolve, 1000));

                    if (hashTable[currentIndex].key === target) {
                        slots[currentIndex].style.backgroundColor = '#4CAF50';
                        updateStatus(`找到键 ${target}，对应的值是: ${hashTable[currentIndex].value}`);
                        return;
                    }

                    slots[currentIndex].style.backgroundColor = '#E0E0E0';
                    currentIndex = (currentIndex + 1) % 10;
                }

                updateStatus(`未找到键 ${target}`);
            }
        }

        // 初始化并开始动画
        function init() {
            createHashTable();
            setTimeout(hashSearch, 1000);
        }

        init();

        // 每15秒重置并重新开始，同时随机选择一个新的目标键
        setInterval(() => {
            target = hashTable[Math.floor(Math.random() * hashTable.length)].key;
            init();
        }, 15000);
    </script>
</body>
</html> 